<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width:200px;
			height:200px;
			background:chocolate; 
			position:absolute; 
			top:0;
			left:0; 
			cursor:move;
		}
	</style>
	<body>
		<div id="Box"></div>
	</body>
	<script>
		 class RM{
            constructor(a){
                this.oBox=document.getElementById(a);
                let _this=this
                this.oBox.onmousedown=function(ev){
                    _this.down(ev);
                    _this.up();
                }

            }
            down(ev){
                let _this=this
                this.ev=ev||event;
                this.l=this.ev.clientX-this.oBox.offsetLeft;
                this.t=this.ev.clientY-this.oBox.offsetTop;
                document.onmousemove=function(ev){
                    _this.move(ev);
                }

            }
            move(ev){
                let _this=this;
                this.ev=ev||event;
                _this.x=this.ev.clientX-_this.l;
                _this.y=this.ev.clientY-_this.t;
                this.oBox.style.left=_this.x+'px';
                this.oBox.style.top=_this.y+'px';

            }
            up(){
                let _this=this
                document.onmouseup=function(){
                    _this.clear();
                }
            }
            clear(){
                document.onmouseup=null;
                document.onmousemove=null;
            }

        }
        window.onload=function(){
            new RM('Box')
        }
</script>
</html>
